<template>
  <footer class="bg-white rounded-lg shadow dark:bg-gray-800">
    <div class="w-full mx-auto max-w-screen-xl p-2 md:flex md:items-center md:justify-between">
      
      <div class="flex flex-col dark:text-gray-400">
        <div>
          <p class="text-sm">风里雨里，我在码海航行等你</p>
        </div>
        <!-- 访问量和访客量 -->
        <div class="site-number no-select">
          <span class="site_pv">
              <!-- <i>
                <svg-icon iconName="icon-fangwenliang"></svg-icon>
              </i> -->
              访问量
              <em v-if="webSiteInfoStore.webSiteInfo" class="pv_num">
                  {{ webSiteInfoStore.webSiteInfo.siteAccess }}
              </em>
          </span>
          <span class="site_uv">
              <!-- <i>
                <svg-icon iconName="icon-fangkeliang"></svg-icon>
              </i> -->
              访客量
              <em v-if="webSiteInfoStore.webSiteInfo" class="uv_num">
                  {{ webSiteInfoStore.webSiteInfo.visitorAccess }}
              </em>
          </span>
        </div>
      </div>


      <ul class="flex flex-col flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0">
        <li>
          备案号：<a href="http://beian.miit.gov.cn/" target="_blank" class="hover:underline me-4 md:me-6 hand-style">闽ICP备2024051765号-1</a>
        </li>
        <li>
          <span class="text-sm text-gray-500 sm:text-center dark:text-gray-400">© 2024 <a href="https://www.ymblog.top/"
              class="hover:underline hand-style">码海航行</a>. All Rights Reserved.
          </span>
        </li>
      </ul>

      <div class="flex dark:text-gray-400">
        <svg-icon class="mr-1" iconName="icon-haoping"></svg-icon>
        <span>本站居然运行了
            <strong>{{ days }}</strong> 天
            <strong>{{ hours }}</strong> 时
            <strong>{{ minute }}</strong> 分
            <strong>{{ second }}</strong> 秒
        </span>
      </div>


      

    </div>
  </footer>
</template>
<script setup>
import { ref } from 'vue'
import { useWebSiteInfoStore } from '@/stores/websiteinfo'
import { report, getWebSiteInfo } from '@/api/frontend/other'
const webSiteInfoStore = useWebSiteInfoStore()

// 天
const days = ref('')
// 时
const hours = ref('')
// 分
const minute = ref('')
// 秒
const second = ref('')



function init() {
  let timer = setInterval(() => {
    let timeold = new Date().getTime() - new Date(1709222400000).getTime();
    let msPerDay = 24 * 60 * 60 * 1000;
    let daysold = Math.floor(timeold / msPerDay);
    let day = new Date();
    days.value = daysold;
    hours.value = day.getHours();
    minute.value = day.getMinutes();
    second.value = day.getSeconds();
  }, 1000);
  // 获取网站相关信息和增加访客量和访问量
  report().then(res => {})
  webSiteInfoStore.getWebSiteInfos()
}

init()
</script>
<style lang="scss" scoped>
  strong {
    color: #3a8ee6
  }

.site-number {

    i {
      display: inline-block;
      font-size: 12px;
    }

    .site_pv,
    .site_uv,
    .online_user {
      position: relative;
      display: inline-block;
      margin-right: 4px;
      height: 24px;
      padding-left: 10px;
      line-height: 24px;
      overflow: hidden;
      font-size: 12px;
      font-weight: 700;
      color: #fff;
      background: #232323;
      border-radius: 5px;
    }

    .pv_num,
    .uv_num,
    .online_num {
      display: inline-block;
      font-size: 12px;
      padding: 0 15px;
    }

    .pv_num {
      background: linear-gradient(0deg, #d0339b, #d03336);
    }

    .uv_num {
      background: linear-gradient(0deg, #e2c63a, #f58044);
    }

    .online_num {
      background: linear-gradient(0deg, #367eda, #964fdb);

    }
}

.no-select {
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }
</style>